<template>
  <div class="FxEcharts">
    <div class="flexC AlignItemsC">
      <div class="flex ">
        <div class="flexC JustifyContentSA  flex2 category pggffx">
          <div class="flex JustifyContentSA AlignItemsC">
            <p class=" font_28 nav title">
              <span></span>
              老人护理需求分析
            </p>
            <ul class="flex font_s16 textC pgdj_ul">
              <li class="tab_a " @click="curFun(1)" :class="{ cur: cur === 1 }">临床护理</li>
              <li class="tab_a" @click="curFun(2)" :class="{ cur: cur === 2 }">生活护理</li>
            </ul>
          </div>
          <div class="flex JustifyContentSA" v-if="cur === 1" >
            <chart class="chart" ref="chart5" :options="orgOptions.echarts5" :auto-resize="true"></chart>
          </div>
          <div class="flex JustifyContentSA" v-if="cur === 2" >
            <chart class="chart" ref="chart6" :options="orgOptions.echarts6" :auto-resize="true"></chart>
          </div>
        </div>
        <div class="flexC JustifyContentSA  flex2 category pggffx">
          <p class=" font_28 nav title">
            <span></span>
            未来6个月评估高峰分析预测
          </p>
          <charts-three></charts-three>
          <!--<chart ref="chart2" :options="orgOptions.echarts5" :auto-resize="true"></chart>-->
        </div>
        <div class="flexC JustifyContentSA   flex2 category pggffx">
          <div class="flex JustifyContentSA AlignItemsC">
            <p class=" font_28 nav title">
              <span></span>
              评估等级占比图
            </p>
            <ul class="flex font_s16 textC pgdj_ul">
              <li class="tab_a " @click="tabFun(1)" :class="{ tab: tab === 1 }">初评</li>
              <li class="tab_a" @click="tabFun(2)" :class="{ tab: tab === 2 }">复核</li>
              <li class="tab_a" @click="tabFun(3)" :class="{ tab: tab === 3 }">期末</li>
              <li class="tab_a" @click="tabFun(4)" :class="{ tab: tab === 4 }">状态</li>
            </ul>
          </div>
          <div class="flex JustifyContentSA" v-if="tab === 1" >
            <chart id="echarts" ref="chart2" :options="orgOptions.echarts1" :auto-resize="true"></chart>
            <ul class="flexC JustifyContentSA colorF font_s22 tab_main textC">
              <li class="flex JustifyContentSA AlignItemsC" style="width:14.875rem;height:2.75rem;border:1px solid rgba(0,160,233,1);">
                <p class="flex1">护理等级</p>
                <p class="flex1">占比</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p>0-1级</p>
                <p>6.17%</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p>2-3级</p>
                <p>27.47%</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p>4级</p>
                <p>14.58%</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p>5-6级</p>
                <p>35.32%</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p>7级</p>
                <p>16.46%</p>
              </li>
            </ul>
          </div>
          <div class="flex JustifyContentSA" v-if="tab === 2" >
            <chart id="echarts" ref="chart2" :options="orgOptions.echarts2" :auto-resize="true"></chart>
            <ul class="flexC JustifyContentSA colorF font_s22 tab_main textC">
              <li class="flex JustifyContentSA AlignItemsC" style="width:14.875rem;height:2.75rem;border:1px solid rgba(0,160,233,1);">
                <p>护理等级</p>
                <p>占比</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p>0-1级</p>
                <p>0.22%</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p>2-3级</p>
                <p>78.46%</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p>4级</p>
                <p>2.73%</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p>5-6级</p>
                <p>18.59%</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p>7级</p>
                <p>0%</p>
              </li>
            </ul>
          </div>
          <div class="flex JustifyContentSA" v-if="tab === 3" >
            <chart id="echarts" ref="chart2" :options="orgOptions.echarts3" :auto-resize="true"></chart>
            <ul class="flexC JustifyContentSA colorF font_s22 tab_main textC">
              <li class="flex JustifyContentSA AlignItemsC" style="width:14.875rem;height:2.75rem;border:1px solid rgba(0,160,233,1);">
                <p>护理等级</p>
                <p>占比</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p>0-1级</p>
                <p>0.92%</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p>2-3级</p>
                <p>4.61%</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p>4级</p>
                <p>43.78%</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p>5-6级</p>
                <p>49.31%</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p>7级</p>
                <p>1.38%</p>
              </li>
            </ul>
          </div>
          <div class="flex JustifyContentSA" v-if="tab === 4">
            <chart id="echarts" ref="chart2" :options="orgOptions.echarts4" :auto-resize="true"></chart>
            <ul class="flexC JustifyContentSA colorF font_s22 tab_main textC">
              <li class="flex JustifyContentSA AlignItemsC" style="width:14.875rem;height:2.75rem;border:1px solid rgba(0,160,233,1);">
                <p>护理等级</p>
                <p>占比</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p>0-1级</p>
                <p>2.48%</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p>2-3级</p>
                <p>19.15%</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p>4级</p>
                <p>12.64%</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p>5-6级</p>
                <p>56.63%</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p>7级</p>
                <p>9.1%</p>
              </li>
            </ul>
          </div>

        </div>
      </div>
      <div class="flex ">
        <div class="flexC   flex2 category pggffx">
          <p class=" font_28 nav title">
            <span></span>
            60岁以上老人享受长护险趋势图
          </p>
        </div>
        <div class="flexC   flex2 category pggffx">
          <p class=" font_28 nav title">
            <span></span>
            居家、住养服务人数趋势图 析
          </p>
        </div>
        <div class="flexC   flex2 category pggffx">
          <p class=" font_28 nav title">
            <span></span>
            护理员配比超12:1的单位增减情况图
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ChartsThree from "./ChartsThree";
export default {
  name: 'FxEcharts',
  components: {ChartsThree},
  data () {
    return {
      tab: 1,
      cur: 1,
      orgOptions: { echarts1: {}, echarts2: {}, echarts3: {}, echarts4: {}, echarts5: {}, echarts6: {} }
    }
  },
  methods: {
    tabFun (index) {
      this.tab = index
    },
      curFun (index) {
          this.cur = index
      }
  },
  mounted () {
    this.orgOptions.echarts1 = {
      color: ['#59f9fa', '#00a0e9', '#3ac425', '#e6b603', '#dc5858'],
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)',
        textStyle: {
          fontSize: '14'
        },
        padding: 10,
        confine: true
      },
      series: [
        {
          type: 'pie',
          hoverAnimation: true,
          radius: ['15%', '85%'],
          avoidLabelOverlap: false,
          data: [
            { name: '0-1级', value: '2982' },
            { name: '2-3级', value: '13278' },
            { name: '4级', value: '7049' },
            { name: '5-6级', value: '17069' },
            { name: '7级', value: '7953' }
          ],
          label: {
            normal: {
              show: true,
              position: 'inner',
              formatter: function (params) {
                if (parseInt(params.percent) === 0) {
                  return ''
                } else {
                  return parseInt(params.percent) + '%'
                }
              },
              textStyle: {
                fontSize: '14'
              }
            }
          },
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    this.orgOptions.echarts2 = {
      color: ['#59f9fa', '#00a0e9', '#3ac425', '#e6b603', '#dc5858'],
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)',
        textStyle: {
          fontSize: '14'
        },
        padding: 10,
        confine: true
      },
      series: [
        {
          type: 'pie',
          hoverAnimation: true,
          radius: ['15%', '85%'],
          avoidLabelOverlap: false,
          data: [{ name: '0-1级', value: '9' }, { name: '2-3级', value: '3166' }, { name: '4级', value: '110' }, { name: '5-6级', value: '750' }, { name: '7级', value: '0' }],
          label: {
            normal: {
              show: true,
              position: 'inner',
              formatter: function (params) {
                if (parseInt(params.percent) === 0) {
                  return ''
                } else {
                  return parseInt(params.percent) + '%'
                }
              },
              textStyle: {
                fontSize: '14'
              }
            }
          },
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    this.orgOptions.echarts3 = {
      color: ['#59f9fa', '#00a0e9', '#3ac425', '#e6b603', '#dc5858'],
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)',
        textStyle: {
          fontSize: '14'
        },
        padding: 10,
        confine: true
      },
      series: [
        {
          type: 'pie',
          hoverAnimation: true,
          radius: ['15%', '85%'],
          avoidLabelOverlap: false,
          data: [{ name: '0-1级', value: '2' }, { name: '2-3级', value: '10' }, { name: '4级', value: '95' }, { name: '5-6级', value: '107' }, { name: '7级', value: '3' }],
          label: {
            normal: {
              show: true,
              position: 'inner',
              formatter: function (params) {
                if (parseInt(params.percent) === 0) {
                  return ''
                } else {
                  return parseInt(params.percent) + '%'
                }
              },
              textStyle: {
                fontSize: '14'
              }
            }
          },
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    this.orgOptions.echarts4 = {
      color: ['#59f9fa', '#00a0e9', '#3ac425', '#e6b603', '#dc5858'],
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)',
        textStyle: {
          fontSize: '14'
        },
        padding: 10,
        confine: true
      },
      series: [
        {
          type: 'pie',
          hoverAnimation: true,
          radius: ['15%', '85%'],
          avoidLabelOverlap: false,
          data: [{ name: '0-1级', value: '24' }, { name: '2-3级', value: '185' }, { name: '4级', value: '209' }, { name: '5-6级', value: '547' }, { name: '7级', value: '1' }],
          label: {
            normal: {
              show: true,
              position: 'inner',
              formatter: function (params) {
                if (parseInt(params.percent) === 0) {
                  return ''
                } else {
                  return parseInt(params.percent) + '%'
                }
              },
              textStyle: {
                fontSize: '14'
              }
            }
          },
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    },
        this.orgOptions.echarts5 = {
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '2%',
                right: '2%',
                bottom: '2%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#ffffff' // 坐标字体颜色
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff' // x坐标轴颜色
                        }
                    },
                    data : ['生命体征监测', '药物喂服  ',
                        '血糖监测', '开塞露/直肠栓剂 ', '皮下注射',
                        '导尿（女性）', '吸氧', '物理降温  ',
                        '鼻饲', '肌肉注射', '压疮伤口换药',
                        '静脉血标本采集', '灌肠', '造口护理',
                        'PICC'],
                    axisLabel: {
                        alignWithLabel: true,
                        interval:0,
                        rotate:40
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLine: { //坐标轴线条相关设置(颜色等)
                        lineStyle: {
                            color: '#60707F' // y轴颜色
                        }
                    },
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#60707F'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#60707F' //分隔线颜色设置
                        }
                    }
                }
            ],
            series : [
                {
                    name:'',
                    type:'bar',
                    barWidth: '15',
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    data:[107795, 15161, 4435, 724, 218, 213, 206,150, 104, 88, 54, 39, 6, 0,0]
                }
            ],
            dataZoom: {
                show: true, // 为true 滚动条出现
                realtime: true,
                type:'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
                height: 10, // 表示滚动条的高度，也就是粗细
                start: 20, // 表示默认展示20%～80%这一段。
                end: 80
            }
        },
        this.orgOptions.echarts6 = {
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '2%',
                right: '2%',
                bottom: '2%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#ffffff' // 坐标字体颜色
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff' // x坐标轴颜色
                        }
                    },
                    data : ['温水擦浴', '整理床单位  ',
                        '手、足部清洁', '生活自理能力训练 ', '头面部清洁、梳理',
                        '洗发', '协助更衣', '沐浴  ',
                        '指/趾甲护理', '晨间护理', '口腔清洁',
                        '药物管理', '协助进食/水', '晚间护理',
                        '压疮预防护理',
                        '安全护理', '会阴护理', '排泄护理（协助排险）',
                        '借助器具移动', '皮肤外用药涂擦', '失禁护理',
                        '协助床上移动',
                        '协助翻身叩背排痰', '床上使用便器', '人工取便术',
                        '留置尿管的护理', '人工肛门便袋护理'],
                    axisLabel: {
                        alignWithLabel: true,
                        interval:0,
                        rotate:30
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLine: { //坐标轴线条相关设置(颜色等)
                        lineStyle: {
                            color: '#60707F' // y轴颜色
                        }
                    },
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#60707F'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#60707F' //分隔线颜色设置
                        }
                    }
                }
            ],
            series : [
                {
                    name:'',
                    type:'bar',
                    barWidth: '10',
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    data:[540504, 449600, 313124, 279475, 267589, 259813, 248346,
                        170962, 136890, 130600, 100039, 89944, 85368, 79241, 77114,
                        57431, 40370, 27223, 16424, 16213, 10210,9272, 7840, 3447, 3189, 1563, 893]
                }
            ],
            dataZoom: {
                show: true, // 为true 滚动条出现
                realtime: true,
                type:'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
                height: 10, // 表示滚动条的高度，也就是粗细
                start: 10, // 表示默认展示20%～80%这一段。
                end: 80
            }
        }

    /* this.orgOptions.echarts5 = {
      tooltip: {
        // 提示框
        trigger: 'axis', // 触发类型
        axisPointer: {
          // 坐标轴指示器配置项
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: true,
        axisLabel: {
          show: true,
          textStyle: {
            color: '#ffffff' // 坐标字体颜色
          }
        },
        axisLine: {
          lineStyle: {
            color: '#ffffff' // x坐标轴颜色
          }
        },
        data: ['10月', '11月', '12月', '1月', '2月', '3月']
      },
      yAxis: {
        type: 'value',
        axisLine: {
          //坐标轴线条相关设置(颜色等)
          lineStyle: {
            color: '#60707F' // y轴颜色
          }
        },
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#60707F'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#60707F' //分隔线颜色设置
          }
        }
      },
      series: [
        {
          data: [3825, 530, 547, 821, 1139, 945],
          type: 'line',
          symbol: 'circle', //标记的图形
          symbolSize: 6, // 拐点的大小
          itemStyle: {
            normal: {
              borderColor: '59F9FA', // 边框颜色
              color: '#59F9FA', // 折线上标记点的颜色 和 图例的颜色
              lineStyle: {
                width: 1, //  折线图的粗细
                color: '#59F9FA' // 折线的颜色
              }
            }
          },
          areaStyle: {
            normal: {
              type: 'default',
              color: new echarts.graphic.LinearGradient(
                50,
                104,
                155,
                0.4,
                [
                  {
                    offset: 0,
                    color: '#32689B' // 区域颜色
                  },
                  {
                    offset: 1,
                    color: '#32699E' // 区域颜色
                  }
                ],
                false
              )
            }
          }
        }
      ]
    };
    window.addEventListener('resize',function() {this.orgOptions.echarts5.resize()}) */
  }
}
</script>

<style lang="scss" scoped>
  .pggffx{
    position: relative;
    overflow: hidden;
    .chart {
      height: 96%;
      width: 95%;
      position: absolute;
      left: 1rem;
      top: 1.5rem;
    }
    .pgdjzbt_box{
      top: 3rem;
    }
    .title{
      position: absolute;
      top: 0.2rem;
      left: 0;
    }
    .pgdj_ul{
      position: absolute;
      right: 1rem;
      top: 1rem;
    }
  }


.FxEcharts {
  .category {
    width: 36rem;
    height: 24.125rem;
    background: rgba(24, 35, 60, 0.6);
    margin: 1rem;
    #echarts {
      width: 15rem;
      height: 15rem;
    }
    .nav {
      font-weight: 400;
      color: rgba(89, 249, 250, 1);
      line-height: 3rem;
      span {
        display: inline-block;
        width: 0.5rem;
        height: 1.75rem;
        background: rgba(89, 249, 250, 1);
      }
    }
    .tab_a {
      height: 1.75rem;
      color: #ffffff;
      padding: 0 0.5rem;
      line-height: 1.75rem;
      font-weight: bold;
      border: 1px solid rgba(89, 249, 250, 1);
    }
    .tab, .cur {
      height: 1.75rem;
      color: #ffffff;
      background: rgba(16, 31, 57, 1);
      border: 1px solid rgba(89, 249, 250, 1);
      background: rgba(89, 249, 250, 1);
    }
    .tab_main {
      font-weight: 400;
    }
  }
}
</style>
